<template>
  <div class="app-container">
    <div class="queryform">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="申请人:" prop="applyUserCode">
          <el-input v-model="form.applyUserCode" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="审批人:" prop="approvalUserCode">
          <el-input v-model="form.approvalUserCode" placeholder="请输入"></el-input>
          <!-- <el-select v-model="form.approvalUserCode" placeholder="请选择审批人">
            <el-option v-for="item in persons" :key="item.userId" :label="item.userCode" :value="item.userCode">
            </el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="审批结果:" prop="approvalResult">
          <el-select v-model="form.approvalResult" placeholder="请选择">
            <el-option v-for="item in results" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="所属机房:" prop="computer"> </el-form-item> -->
        <!-- <el-form-item label="触发时间:" prop="terminalIp">
          <el-input v-model="form.terminalIp" placeholder="请输入"></el-input>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="refresh">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="mod-result-table">
      <HTable ref="table" :tableData="tableData" :columnConfigs="columnConfigs" @selection-change="handleSelectionChange"
        :selectable="false" orderable v-loading="loading" :pages="pagination" @page-change="handlePageChange"
        @size-change="handleSizeChange">
        <template slot-scope="{ row }">
          <template v-if="row.name == 'action'"> </template>
          <template v-else-if="row.name == 'time'">
            {{ $getTimeStr(row.row.time) }}
          </template>
          <template v-else-if="row.name == 'authorizeType'">
            {{ authorizeTypeLabel(row.row.authorizeType) }}
          </template>
          <template v-else-if="row.name == 'applyReasonType'">
            {{ applyReasonTypeLabel(row.row.applyReasonType) }}
          </template>
          <template v-else-if="row.name == 'approvalResult'">
            <el-tag v-if="row.row.approvalResult == 1" type="success">审批成功</el-tag>
            <el-tag v-if="row.row.approvalResult == 2" type="danger">审批失败</el-tag>
            <el-tag v-if="row.row.approvalResult == 3" type="success">驳回成功</el-tag>
            <el-tag v-if="row.row.approvalResult == 4" type="danger">驳回失败</el-tag>
          </template>
        </template>
      </HTable>
    </div>
  </div>
</template>

<script>
import table from "@/mixins/commontable";
import { columnConfigs } from "./columnConfigs.js";
import { addList, editList, getList, delCurRow } from "@/api/yybl/jinkulog";
import { mapActions, mapState } from "vuex";
export default {
  components: {},
  mixins: [table], //表格的混入，主要包括表格上通用的方法和数据，比如查询，重置，分页这些功能
  props: {},
  data() {
    let checkTransparency = (rex, value, callback) => {
      // if (!value) {
      //   return callback(new Error('年龄不能为空'));
      // }
      // const rule = new RegExp("^0.\d$");
      const rule = /^0.\d+$/;
      if (rule.test(value) || value == 0 || value == 1) {
        callback();
      } else {
        callback(new Error("透明度范围为0-1"));
      }
    };
    let checkNumber = (rex, value, callback) => {
      // if (!value) {
      //   return callback(new Error('年龄不能为空'));
      // }
      // const rule = new RegExp("^0.\d$");
      const rule = /^\d*$/;
      if (rule.test(value)) {
        callback();
      } else {
        callback(new Error("请输入数字"));
      }
    };
    return {
      columnConfigs,
      dialogVisible1: false,
      editFlag: false,
      form: {
        applyUserCode: "",
        approvalUserCode: "",
        approvalResult: "",
      },
      rules: {},
      fontOptions: [
        {
          value: "微软雅黑",
          label: "微软雅黑",
        },
        {
          value: "宋体",
          label: "宋体",
        },
        {
          value: "仿宋",
          label: "仿宋",
        },
        {
          value: "黑体",
          label: "黑体",
        },
        {
          value: "楷体",
          label: "楷体",
        },
        {
          value: "等线",
          label: "等线",
        },
      ],
      results: [{
        label: '审批成功',
        value: '1'
      }, {
        label: '审批失败',
        value: '2'
      },
      {
        label: '驳回成功',
        value: '3'
      }, {
        label: '驳回失败',
        value: '4'
      }],
      vpnform: {
        // rotation: new Number(),
        // size: new Number(),
      },
      rulesVpnform: {
        size: [
          { validator: checkNumber, trigger: "blur" },
          // { required: false, message: "大小不能为空" },
          // { type: "number", message: "大小必须为数字值" },
        ],
        rotation: [
          { validator: checkNumber, trigger: "blur" },
          // { required: false, message: "角度不能为空" },
          // { type: "number", message: "角度必须为数字值" },
        ],
        width: [
          { validator: checkNumber, trigger: "blur" },
          // { required: false, message: "大小不能为空" },
          // { type: "number", message: "大小必须为数字值" },
        ],
        height: [
          { validator: checkNumber, trigger: "blur" },
          // { required: false, message: "大小不能为空" },
          // { type: "number", message: "大小必须为数字值" },
        ],
        transparency: [{ validator: checkTransparency, trigger: "blur" }],
      },
      computers: [],
      vpntypes: [],
      curRow: {},
    };
  },
  watch: {},
  computed: {
    ...mapState("common", ["persons"]),
  },
  methods: {
    ...mapActions("common", ["getPersondatas"]),
    // getTimeStr(val) {
    //   if (val) {
    //     return moment(val).format("YYYY-MM-DD HH:mm:ss");
    //   } else {
    //     return val;
    //   }
    // },
    authorizeTypeLabel(val) {
      const obj = {
        1: '现场授权',
        2: '远程授权',
      }
      return obj[val]
    },
    applyReasonTypeLabel(val) {
      const obj = {
        1: '客户投诉',
        2: '系统集成',
        3: '故障处理',
        4: '业务受理',
        5: '业务测试'
      }
      return obj[val]
    },
    add() {
      this.editFlag = false;
      this.$nextTick(() => {
        this.dialogVisible1 = true;
        this.$refs?.addform?.clearValidate();
      });
      this.vpnform = {
        host: "",
        content: "",
        rotation: "15",
        size: "16",
        font: "微软雅黑",
        color: "#f0f0f0",
        width: "250",
        height: "150",
        transparency: "0.5",
      };
      this.$refs?.addform?.clearValidate();
      console.log(this.vpnform);
    },
    edit(row) {
      this.editFlag = true;
      this.dialogVisible1 = true;
      this.curRow = row;
      const {
        host,
        content,
        size,
        rotation,
        font,
        color,
        width,
        height,
        transparency,
      } = row;
      this.vpnform = {
        host,
        content,
        size,
        rotation,
        font,
        color,
        width,
        height,
        transparency,
      };
    },
    async handleDelete(row) {
      this.$confirm("此操作将删除数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let ids;
          if (row) ids = row.watermarkId;
          const res = await delCurRow({
            ids: ids,
          });
          if (res.rescode == "200") {
            this.$message.success("删除成功");
            this.refresh();
          } else this.$message.error(res.msg);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    submitaddForm(val) {
      console.log(val);
      this.$refs["addform"].validate((val) => {
        if (val) {
          console.log("通过校验");
          const {
            host,
            content,
            size,
            rotation,
            font,
            color,
            width,
            height,
            transparency,
          } = this.vpnform;
          let params = {
            host,
            content,
            size,
            rotation,
            font,
            color,
            width,
            height,
            transparency,
          };
          // params.userId = null;
          // params.sharedkey = encode(form.sharedkey);
          if (this.editFlag) {
            params.watermarkId = this.curRow.watermarkId;
            editList(params)
              .then((res) => {
                if (res.rescode == 200) {
                  this.dialogVisible1 = false;
                  this.$message.success("编辑成功");
                  this.refresh();
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch((err) => {
                console.log(err);
              });
          } else {
            // 调用新增接口
            addList(params)
              .then((res) => {
                if (res.rescode == 200) {
                  this.dialogVisible1 = false;
                  this.$message.success("新增成功");
                  this.refresh();
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch((err) => {
                console.log(err);
              });
          }
        } else {
          console.log("校验失败");
        }
      });
    },
    handleClose() {
      this.dialogVisible1 = false;
    },
    handleSelectionChange() { },
    getparams() {
      const { applyUserCode, approvalUserCode, approvalResult } = this.form;
      return { applyUserCode, approvalUserCode, approvalResult };
    },
    refresh() {
      let params = this.getparams();
      this.getlists(getList, params);
    },
    resetForm() {
      this.$refs["form"].resetFields();
      this.refresh();
    },
  },
  created() {
    this.getPersondatas()
    this.refresh();
  },
  mounted() { },
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__content {
  .el-date-editor.el-input {
    width: 100%;
  }
}

::v-deep .el-button {
  .el-icon-edit+span {
    margin-left: 0px;
  }

  .el-icon-delete+span {
    margin-left: 0px;
  }
}

::v-deep .el-dialog {
  .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
  }

  .el-dialog__footer {
    border-top: 1px solid #e8e8e8;
  }
}

.queryform {
  ::v-deep .el-form {
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
      max-width: 25%;
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 25%;
    }

    // .el-form-item:nth-child(7) {
    //   max-width: 100%;
    //   flex-basis: 100%;
    //   display: flex;
    //   justify-content: end;
    // }
  }
}
</style>
